<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: lightblue;
        }
        .wrap{
            width: 300px;
            height: 200px;
            margin: 200px auto;
            position: relative;
        }
        .wrap img{
            box-sizing: border-box;
            max-width: 100%;
            max-height: 100%;
            border: 5px solid white;
            position: absolute;
            transition: 0.2s; /* css 动画效果 */
        }
        .wrap:hover img:nth-child(1){
            transform: translate(-50%,-50%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(2){
            transform: translate(50%,-100%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(3){
            transform: translate(-50%,50%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(4){
            transform: translate(50%,90%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(5){
            transform: translate(130%,-50%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(6){
            transform: translate(-140%,120%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(7){
            transform: translate(130%,70%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(8){
            transform: translate(-180%,40%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(9){
            transform: translate(-150%,-50%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(10){
            transform: translate(150%,90%) rotate(-10deg);
        }
        .wrap:hover img:nth-child(11){
            transform: scale(1.2) rotate(-10deg);
        }

    </style>
    <script></script>
</head>
<body>
<div class="wrap">
    <img src="../Img/img1.jpg">
    <img src="../Img/img3.png">
    <img src="../Img/img4.png">
    <img src="../Img/img5.png">
    <img src="../Img/img6.png">
    <img src="../Img/img7.png">
    <img src="../Img/img8.png">
    <img src="../Img/img9.png">
    <img src="../Img/img10.png">
    <img src="../Img/img11.png">
    <img src="../Img/img2.png">
</div>
</body>
</html>